<template>
  <div>
    <tabbar v-model="index" @on-index-change="changeIndex" v-show="isShow">
      <tabbar-item link="/user">
        <span slot="label">牛人集市</span>
      </tabbar-item>
      <tabbar-item link="/user/subscriptions">
        <span slot="label">我的订阅</span>
      </tabbar-item>
      <tabbar-item link="/user/positions">
        <span slot="label">我的持仓</span>
      </tabbar-item>
      <tabbar-item link="/user/mine">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import {Tabbar, TabbarItem} from 'vux'

  export default {
    components: {
      Tabbar,
      TabbarItem
    },
    data() {
      return {
        index: 0,
        isShow:true
      }
    },
    computed: {
      stateIndex() {
        return this.$store.state.index
      }
    },
    watch: {
      stateIndex(str) {
        this.index = str;
        if(str>3){
          this.isShow = false;
        }else{
          this.isShow = true;
        }
      }
    },
    created() {
      switch (this.$route.name) {
        case 'awesome':
          this.index = 0;
          break;
        case 'subscriptions':
          this.index = 1;
          break;
        case 'positions':
          this.index = 2;
          break;
        case 'mine':
          this.index = 3;
          break;
        default:
          this.index = 4;
          break;
      }
    },
    methods: {
      changeIndex(newIndex, oldIndex) {
        this.$store.commit('changeIndex', newIndex)
      }
    }
  }
</script>
